<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" v-show="showSearch">
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item label="小区名称" prop="communityId">
            <communitySelect v-model="queryParams.communityId" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="区域" prop="region">
            <el-input
              v-model="queryParams.region"
              placeholder="请输入(模糊搜索)"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="地址" prop="smallAddress">
            <el-input
              v-model="queryParams.smallAddress"
              placeholder="请输入(模糊搜索)"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="姓名" prop="realName">
            <el-input
              v-model="queryParams.realName"
              placeholder="请输入姓名"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="手机号" prop="phone">
            <el-input
              v-model="queryParams.phone"
              placeholder="请输入手机号"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="住户类型" prop="type">
            <el-select
              v-model="queryParams.type"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="(value, key) in memberTypeMap"
                :key="key"
                :label="value"
                :value="Number(key)"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="状态" prop="status">
            <el-select
              v-model="queryParams.status"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="(value, key) in memberStatusMap"
                :key="key"
                :label="value"
                :value="Number(key)"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label-width="0">
            <el-button type="primary" icon="Search" @click="handleQuery"
              >搜索</el-button
            >
            <el-button plain icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-table v-loading="loading" :data="memberList" border>
      <el-table-column prop="id" label="ID" width="80" align="center" />
      <el-table-column prop="realName" label="姓名" align="center" />
      <el-table-column prop="phone" label="手机号" align="center" />
      <el-table-column prop="type" label="类型" align="center">
        <template #default="scope">
          {{ memberTypeMap[scope.row.type] }}
        </template>
      </el-table-column>
      <el-table-column
        prop="roomNum"
        label="房屋信息"
        align="center"
        min-width="200"
      >
        <template #default="{ row }">
          <span
            >{{ row.communityName }} {{ row.region }} {{ row.smallAddress }}
            {{ row.floorName }} {{ row.unitNum ? row.unitNum + "单元" : "" }}
            {{ row.roomNum }}</span
          >
        </template>
      </el-table-column>
      <el-table-column prop="region" label="区域" align="center" width="100" />
      <el-table-column prop="smallAddress" label="地址" align="center" />
      <el-table-column prop="status" label="状态" align="center">
        <template #default="scope">
          {{ memberStatusMap[scope.row.status] }}
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        width="120"
        align="center"
      />
      <el-table-column
        label="操作"
        width="180"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template #default="{ row }">
          <el-button link type="primary" @click="handleEdit(row)"
            >查看</el-button
          >
          <el-button
            link
            :disabled="![0, 1].includes(row.status)"
            type="primary"
            @click="handleAudit(row)"
            >审核</el-button
          >
          <!-- <el-button link type="primary" @click="handleDelete(row)"
            >删除</el-button
          > -->
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
    <add-edit
      v-model="dialog"
      :title="title"
      :row="curRow"
      :is-audit="isAudit"
      @submit="getList"
    />
  </div>
</template>

<script setup name="Member">
import { ref, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import AddEdit from "./addEdit.vue";
import {
  getCommunityMemberPage,
  removeCommunityMember,
} from "@/api/realEstateManage";
import communitySelect from "@/components/communitySelect";

const loading = ref(true);
const showSearch = ref(true);
const total = ref(0);
const queryRef = ref();

const memberList = ref([]);
const queryParams = reactive({
  communityId: "",
  realName: "",
  type: null,
  pageNo: 1,
  pageSize: 10,
});

const isAudit = ref(false);
const dialog = ref(false);
const title = ref("");
const curRow = ref({});

const memberTypeMap = {
  0: "业主本人",
  1: "家人",
  2: "朋友",
  3: "租客",
};

const memberStatusMap = {
  0: "后台待审核",
  1: "业主待审核",
  2: "已审核",
  3: "拒绝",
};

const getList = () => {
  loading.value = true;
  getCommunityMemberPage(queryParams)
    .then(({ data }) => {
      memberList.value = data.records;
      total.value = data.total;
    })
    .finally(() => {
      loading.value = false;
    });
};

const handleQuery = () => {
  queryParams.pageNo = 1;
  getList();
};

const resetQuery = () => {
  queryRef.value.resetFields();
  queryParams.pageNo = 1;
  handleQuery();
};

const handleAdd = () => {
  dialog.value = true;
  title.value = "添加用户";
  isAudit.value = false;
  // 重置表单数据
};

const handleEdit = (row) => {
  dialog.value = true;
  title.value = "查看";
  curRow.value = row;
  isAudit.value = false;
  // 设置表单数据
};
const handleAudit = (row) => {
  dialog.value = true;
  title.value = "审核用户";
  isAudit.value = true;
  curRow.value = row;
};

const handleDelete = (row) => {
  ElMessageBox.confirm("确定要删除该用户吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    removeCommunityMember(row.id).then(() => {
      ElMessage.success("删除成功");
      getList();
    });
  });
};

getList();
</script>

<style scoped lang="scss"></style>
